/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 短信/短信审核
 */

import React, { useMemo, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import { Tabs } from 'antd';
import KbSmsAudit from '@/components/_pages/sms/examine/audit';
import KbSmsAudited from '@/components/_pages/sms/examine/audited';
import RedPoint from '@/components/_pages/red-point';

interface IndexType {
  winSize: string;
}

const Index = (props: IndexType) => {
  const { winSize } = props;
  const [activeKey, setActiveKey] = useState<string>('audit');
  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);
  const tabList: any[] = useMemo(
    () => [
      {
        label: <RedPoint type='0'>待审短信</RedPoint>,
        key: 'audit',
        children: <KbSmsAudit />,
      },
      {
        label: '已审短信',
        key: 'audited',
        children: <KbSmsAudited />,
      },
    ],
    [activeKey, screenSize],
  );

  return (
    <PageContainer>
      <Tabs items={tabList} activeKey={activeKey} onChange={setActiveKey} />
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(Index));
